import './index.scss'
import { Card, Form, Input, Button, message } from 'antd'
import logo from '@/assets/logo.png'
// 导入redux异步请求的函数
import { fetchLogin } from '@/store/modules/user'
import { useDispatch } from 'react-redux'
import { useNavigate } from 'react-router-dom'

const Login = () => {
	//先有这个才能触发  redux 的异步请求
	const dispatch = useDispatch()
	//  生成 useNavigate 的实例
	const navigate = useNavigate()
	const onFinish = async (formValue) => {
		await dispatch(fetchLogin(formValue))

		// 的把上面的改成异步的  调用完 接口后 token回来后 才执行下面的代码
		// 跳转到首页
		navigate('/')
		// 提示语
		message.success('登录成功')
	}
	return (
		<div className="login">
			<Card className="login-container">
				<img className="login-logo" src={logo} alt="" />
				{/* 登录表单 */}
				<Form onFinish={onFinish}>
					<Form.Item
						validateTrigger="onBlur"
						name="mobile"
						// 多条校验规则  先校验第一条 第一条通过后 在校验第二条 两条都通过才行
						rules={[
							{ required: true, message: '请输入手机号' },
							{ pattern: /^1[3-9]\d{9}$/, message: '手机号码格式不对' }
						]}>
						<Input size="large" placeholder="请输入手机号" />
					</Form.Item>
					<Form.Item validateTrigger="onBlur" name="code" rules={[{ required: true, message: '请输入验证码' }]}>
						<Input size="large" placeholder="请输入验证码" />
					</Form.Item>
					<Form.Item>
						<Button type="primary" htmlType="submit" size="large" block>
							登录
						</Button>
					</Form.Item>
				</Form>
			</Card>
		</div>
	)
}

export default Login
